<template>
    <div class="banner" @click="isShowGallery = true">
        <img :src="bannerImage" alt="" class="banner-img">
        <div class="banner-info">
            <div class="banner-number">
                <span class="iconfont">&#xe60b;</span>39
            </div>
            <div class="banner-title">{{ sightName }}</div>
        </div>
        <commmon-fade>
            <gallery :imgDatas="galleryImages" v-show="isShowGallery" @closeGallery="handleClick"></gallery>
        </commmon-fade>
    </div>
</template>

<script>
import Gallery from '../../../common/gallery/Gallery.vue';
import CommmonFade from '../../../common/fade/Fave.vue';

export default {
    name: 'Banner',
    components: { 
        Gallery,
        CommmonFade
    },
    props: {
        bannerImage: String,
        galleryImages: Array,
        sightName: String
    },
    data(){
        return{
            isShowGallery: false
        }
    },
    methods: {
        handleClick(){
            this.isShowGallery = false;
        }
    }
}
</script>

<style lang="stylus">
    .banner{
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 55%;
        background-color: #eee;
    };

    .banner .banner-img{
        width: 100%;
    }

    .banner .banner-info{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        padding: 0 .2rem .2rem;
        line-height: .4rem;
        background: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.6));
    }

    .banner .banner-info .banner-number{
        width: 1.2rem;
        height: .6rem;
        line-height: .6rem;
        border-radius: .2rem;
        text-align: center;
        background-color: regb(0,0,0,.5);
    }

    .banner .banner-info .banner-title{
        font-size: .36rem;
    }
</style>